<template>
	<div class="flex-lm btn-tab tool dis-flex">
    <el-popover class="emojiShow" placement="top-start" :width="26*15+13*2" trigger="click" v-model="tools[0].isActive">
      <div class="emojiShow">
        <template v-for="(v,i) in emojiList">
          <div class="img-box" :key="i" @click="addEmoji(v)">
            <img class="img-inline" :src="v.img" :alt="v.txt">
          </div>
        </template>
      </div>
      
      <button slot="reference"
        :disabled="!('userId' in activeCus.value)"
        :class="['btn','iconfont',tools[0].icon,tools[0].isActive?'active':'']">
        {{ tools[0].txt }}
      </button>
    </el-popover>
		<el-upload class="upload-demo" :action="serverUrl"
			:data="fileUpload"
			:before-upload="uploadBefore"
			:on-success="uploadSuccess"
			:on-error="uploadError"
			:show-file-list="false"
			ref="cover">
			<template v-for="(v,i) in tools">
        <button v-if="i!=0" :key="i"
          :class="['btn','iconfont',v.icon,v.isActive?'active':'']"
          :disabled="!('userId' in activeCus.value)">
          {{ v.txt }}
        </button>
			</template>
		</el-upload>
	</div>
</template>

<script>
	import { emoji,ruleStr,emojiReplace,ruleImg,imgReplaceEmoji } from '../../../assets/emoticon.js';
	export default {
		name: 'dialogTool',
    inject: [
      'activeCus',//从index.vue依赖注入的客户信息
    ],
		data() {
			return {
				emojiShow:true,
				emojiList:emoji.list,//表情列表
				tools:[
          {isActive:false,txt:'',icon:'icon-face'   ,msgType:'text',},//emoji
          {isActive:false,txt:'',icon:'icon-tupian' ,msgType:'image', },
				],
				fileUpload: { //附件上传
          file: null,
          token:''
				},
				serverUrl: 'http://upload.qiniup.com', //上传图片的地址
				qiniuaddr:'https://qiniuoss.chenxi618.com',
				imgObj:{}//图片信息
			}
		},
		methods: {
			addEmoji(objEmoji){
        let src = objEmoji.img;
        let alt = objEmoji.txt;
        this.$emit('addEmoji',{src,alt})
			},//来自emoji的表情处理,需要作为文本对象传出
			uploadBefore(file) {
        if(file.type != "image/png" && file.type != "image/jpeg") {
          this.$message({
            message: '请上传正确的图片',
            type: 'warning'
          });
          return false;
        }
				// 获取图片宽高
				let _this = this;
				var reader = new FileReader();
				reader.onload = function (event) {
					var txt = event.target.result;
					var img = document.createElement("img");
					img.src = txt;
					img.onload = function () {
						_this.imgObj.width = img.width;
						_this.imgObj.height = img.height;
					}
				};
				reader.readAsDataURL(file);
        this.fileUpload.file = file;
        return this.$api.getQiniuToken().then(res=>{
          this.fileUpload.token = res.data.data;
        })
			},// 上传之前回调
			uploadSuccess(response,file,fileList){
        console.log('%c [ response,file,fileList ]-93', 'font-size:13px; background:pink; color:#bf2c9f;', response,file,fileList)
        if(!("key" in response)){ return }
        this.imgObj.src = `${this.qiniuaddr}/${response.key}`;
        console.log(this.imgObj)
				this.$emit('sendImage',{
          type:'image',
          obj:this.imgObj
        })
			},// 上传成功
			uploadError() {
        this.$message.error(`图片上传失败`)
			},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../../assets/config.less');
	@import url('../../../assets/style.less');
	.tools{
	  .btn{
	    font-size:14px;
	    color:#999;
	    &::before{
	      font-size: 16px;
	      margin-right:0.5em;
	    }
	    &.active{
	      color:@blue;
	    }
	    &+.btn{
	      margin-left:10px;
	    }
	  }
	}
	.emojiShow{
	  line-height:0;
	  .img-box{
	    display: inline-block;
	    line-height:unit((26*1),px);
	    width:26px;height:26px;
	    border:1px solid #eee;
	  }
	}
</style>
